<template>
	<view class="container">
		<view class="header">
			<view class="title">Image Cropper</view>
			<view class="sub-title">图片裁剪（wxs）：可设置裁剪框宽高，边缘线颜色，锁定裁剪框大小，是否可触摸旋转等</view>
			<view class="fui-old-version" @tap="oldCropper">切换至旧版图片裁剪</view>
		</view>
		<view class="fui-btn-box">
			<fui-button margin="36rpx 0 0" type="white" shape="circle" @click="chooseImage">组件默认使用</fui-button>
			<fui-button margin="36rpx 0 0" type="white" shape="circle" @click="customCropper">自定义操作栏+详细使用</fui-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		chooseImage() {
			//uni.chooseImage 返回的 tempFilePaths 如果为空，检查自己的开发工具是否为最新版
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: res => {
					const tempFilePaths = res.tempFilePaths[0];
					this.fui.href('../cropper-default/cropper-default?src=' + tempFilePaths);
				}
			});
		},
		customCropper() {
			this.fui.href('../cropper-custom/cropper-custom');
		},
		oldCropper(){
			this.fui.href('../cropper-old/cropper-old');
		}
	}
};
</script>

<style>
.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}

.fui-btn-box {
	width: 100%;
	padding: 10rpx 40rpx;
	box-sizing: border-box;
}
.fui-old-version {
	font-size: 24rpx;
	color: #5677fc;
	padding-top: 18rpx;
}
</style>
